<template>
	<view class="home">
		<!-- 欢迎区域 -->
		<view class="user-card">
			<up-image :src="getHeadImageUrl" width="100rpx" height="100rpx" shape="circle" class="avatar" />
			<view class="user-info">
				<text class="welcome">欢迎您</text>
				<text class="phone"> {{ userInfo.name || "暂无昵称" }}</text>
			</view>
		</view>

		<!-- 上方快捷操作 - 调整为3个 -->
		<view class="quick">
			<view class="quick-actions-bg"></view>
			<view class="quick-actions">
				<view class="action-item" v-for="(item, index) in quickList.slice(0,3)" :key="index" @click="handleQuickClick(item)">
					<up-image :src="item.icon" width="80rpx" height="80rpx" />
					<text class="action-label">{{ item.label }}</text>
				</view>
			</view>
		</view>

		<!-- 功能模块网格 -->
		<view class="grid-section">
			<view class="grid-item" v-for="(item, index) in fullList" :key="index" @click="handleFullClick(item)">
				<up-image :src="item.icon" width="80rpx" height="80rpx" />
				<text class="grid-label">{{ item.label }}</text>
			</view>
		</view>

		<!-- 待办事项 -->
		<view class="todo-card" @click="handleToDoClick">
			<view class="todo-header">
				<text class="todo-title">待办事项</text>
				<up-icon name="arrow-right" size="36rpx" />
			</view>
			<view class="todo-list">
				<view class="todo-item" v-for="item in todos" :key="item.label">
					<text class="todo-label">{{ item.label }}</text>
					<text class="todo-count">{{ item.count }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,computed} from "vue";
	import {onLoad} from "@dcloudio/uni-app";
	import http from "@/api/request";
	const userInfo = ref({});
	const todos = ref([]);
	
	// 快捷操作只保留3个
	const quickList = [{
			label: "新增资产",
			icon: "/static/icons/add.png",
			url: "/pages/assetsPages/info?name=add",
		},
		{
			label: "新增领用",
			icon: "/static/icons/gift.png",
			url: "/pages/assetRequisition/index?name=add",
		},
		{
			label: "新增盘点",
			icon: "/static/icons/check.png",
			url: "/pages/stocktaking/add"
		}
	];

	const fullList = [
		{
			label: "资产领用",
			icon: "/static/icons/gift.png",
			url: "/pages/assetsPages/list?tabs=1",
		},
		{
			label: "资产退库",
			icon: "/static/icons/back.png",
			url: "/pages/assetsPages/list?tabs=2",
		},
    {
      label: '物资找寻',
      icon: '/static/icons/seek.png',
      url: '/pages/assetSeek/seek'
    },
    {
      label: '更多功能',
      icon: '/static/icons/full.png',
      url: '/pages/full/full'
    }
	];

	const handleQuickClick = (item) => {
		uni.navigateTo({
			url: item.url,
		});
	};

	const handleFullClick = (item) => {
		uni.navigateTo({
			url: item.url,
		});
	};

	const handleToDoClick = (item) => {
		uni.navigateTo({
			url: "/pages/todo/todo",
		});
	};

	onLoad(() => {
		// 获取到用户信息
		http.post("/api/account/curUserInfo").then((res) => {
			if (res.code && res.isSuccess) {
				userInfo.value = res.result;
				uni.setStorageSync("userInfo", JSON.stringify(res.result));
			}
		});
		// 页面加载时待办数据
		fetchTodoData();
	});

	// 获取用户头像
	const getHeadImageUrl = computed(() => {
		if (
			!userInfo.value ||
			!userInfo.value.avatarFileId ||
			userInfo.value.avatarFileId.length <= 0
		) {
			return "/static/imgs/avatar.png";
		}
		if (
			userInfo.value.avatarFileId.startsWith("http") ||
			userInfo.value.avatarFileId.startsWith("https")
		) {
			return userInfo.avatarFileId;
		}
	});

	const fetchTodoData = async () => {
		try {
			// 这里替换为实际的API调用
			let reqParam = {
				"pageCode": "assetlist",
				"params": {
					"args": [{
						"name": "interfaceCode",
						"value": "Assetlist.todoCount"
					}]
				},
				"methodName": "todoCount"
			}
			const response = await http.post('/api/module/Invoke', reqParam);

			if (response.isSuccess && response.result) {
				const data = response.result;
				todos.value = [{
						label: "待审核",
						count: data.pending_review_num || 0
					},{
						label: "待签收",
						count: data.sign_num || 0
					},{
						label: "待盘点",
						count: data.stocktaking_num || 0
					}];
			}
		} catch (error) {
			console.error('获取待办事项数据失败:', error);
			// 可以设置默认值或显示错误提示
			uni.showToast({
				title: '获取数据失败',
				icon: 'none'
			});
		}
	};
</script>

<style lang="scss" scoped>
	.home {
		padding: 0;
		font-size: 36rpx;
	}

	.user-card {
		display: flex;
		align-items: center;
		background-color: #4792fd;
		padding: 40rpx;
		color: #fff;

		.avatar {
			margin-right: 30rpx;
		}

		.user-info {
			display: flex;
			flex-direction: column;

			.welcome {
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.phone {
				font-size: 36rpx;
			}
		}
	}

	.quick {
		position: relative;
		padding-bottom: 60rpx; /* 增加底部间距 */

		.quick-actions-bg {
			position: absolute;
			background-color: #4792fd;
			top: 0;
			left: 0;
			width: 100%;
			height: 60%; /* 调整背景高度 */
			z-index: 0;
		}

		.quick-actions {
			background-color: #fff;
			border-radius: 30rpx;
			margin: 0 40rpx;
			padding: 40rpx 0;
			display: flex;
			justify-content: space-around;
			position: relative;
			z-index: 1;
			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
		}

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 0 10rpx;
			width: 33%; /* 确保每个项目宽度一致 */
			min-width: 0; /* 防止内容溢出 */

			.action-label {
				margin-top: 20rpx;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				white-space: nowrap; /* 防止文字换行 */
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
				text-align: center;
			}
		}
	}

	.grid-section {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 30rpx;
		padding: 40rpx;
		background-color: #f8f8f8;

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			padding: 30rpx 10rpx;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);

			.grid-label {
				margin-top: 20rpx;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
			}
		}
	}

	.todo-card {
		background-color: #fff;
		border-radius: 30rpx;
		margin: 40rpx;
		padding: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);

		.todo-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.todo-title {
				font-weight: bold;
				font-size: 36rpx;
				color: #333;
			}
		}

		.todo-list {
			display: flex;
			justify-content: space-around;
			margin-top: 30rpx;

			.todo-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 20rpx;

				.todo-label {
					font-size: 32rpx;
					color: #666;
					margin-bottom: 10rpx;
					white-space: nowrap;
				}

				.todo-count {
					font-size: 36rpx;
					font-weight: bold;
					color: #4792fd;
				}
			}
		}
	}
</style>